<template>
  <div id="sciencechat">
    <el-container v-loading="loading" element-loading-text="数据加载中..." element-loading-background="rgba(0, 0, 0, 0.8)"
      direction="vertical" class="app">
      <div class="JPdom" ref="JPdom" :style="{ backgroundColor: '#2a2c3b' }"></div>
      <Header :scienceuser="scienceuser" :mydata="mydata"></Header>
      <el-container>
        <el-aside class="el-aside col-left" width="666px">
          <leftVue :char1="_char1" :char2="_char2" :char3="_char3" :char4="_char4" :num1="num3" :num2="num2"
            :char5="char5.map(e => { return { type: '标签', day: e.name, count: e.count } })"
            :char9="char9.map(e => { return { type: '标签', day: e.name, count: e.count } })"></leftVue>
        </el-aside>
        <el-main class="main">
          <CenterVue ref="centerref" :mydata="mydata" :timetype="timetype" :char7="char7" :team="team"
            :starttime="time[0]" :endtime="time[1]">
          </CenterVue>
        </el-main>
        <el-aside class="el-aside col-right" width="666px">
          <RightVue :centerref="centerref" :char7="_char7" :char8="_char8" :num1="num1" :num3="team.length" :num2="num2"
            :chat="chat">
          </RightVue>
        </el-aside>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang='ts'>
import JParticles, { Particle } from 'jparticles';
import { assign, forEach } from 'lodash-es';
import { computed, inject, onMounted, onUnmounted, ref } from 'vue';
import router from '../../admin/router';
import { asyncselectmyscience, asyncselectscience, online } from '../../api';
import { IDate } from '../../interface';
import Studycodemodel from '../../mysql_interface/studycodemodel';
import CenterVue from './center.vue';
import Header from './header.vue';
import leftVue from './left.vue';
import RightVue from './right.vue';
const centerref = ref()
const p = defineProps<{ mydata?: boolean }>()
const timetype = ref('%m')
const user = ref<Studycodemodel.Iuser>()
const time = ref([new Date(Date.now() - 1000 * 60 * 60 * 24 * 365), new Date()])
const char1 = ref<{ count: number, day: string }[]>([])
const char2 = ref<{ count: number, city1: string, teamid?: number }[]>([])
const char3 = ref<{ account: string, count: number, usercount: number }>()
const char4 = ref<{ account: string, count: number }>()
const char5 = ref<{ count: number, name: string }[]>([])
const char9 = ref<{ count: number, name: string }[]>([])
const char6 = ref<{ count: number, city1: string }[]>([])
const char7 = ref<{ count: number, ID: number }[]>([])
const char8 = ref<{ count: number, name: string, account: string, userid: number, teamuser: string, teamid: number }[]>([])
const num1 = ref(0)
const team = ref<Studycodemodel.Iteam[]>([])
const query1 = ref<{ count: number, day: string }[]>([])
const query2 = ref<{ count: number, home: string, teamids: string, teamid: number, city1: string }[]>([])
const query3 = ref<{ home: string, count: number }[]>([])
const query4 = ref<{ count: number, home: string, _teamids_: string, _userid_: string, userid: number }[]>([])
const loading = ref(false)
const getm = computed(() => {

})

const type = ref(1)


const _char1 = computed(() => {
  const key: IDate[] = []

  forEach(char1.value, (e) => {
    key.push({ day: e.day, count: Number(e.count), type: '测评次数' })
  })
  forEach(query1.value, e => {
    key.push({ day: e.day, count: Number(e.count), type: '观看视频数' })
  })
  const data = key.sort((a, b) => Number(a.day) - Number(b.day))
  if (type.value === 1) {
    return data.filter(e => e.type === '观看视频数')
  }
  if (type.value === 2) {
    return data.filter(e => e.type === '测评次数')
  }
  return data
})

const teamhome = computed(() => {
  return team.value.map(e => e.teamhome).flat()
})

const _char2 = computed(() => {
  const key: IDate[] = []
  forEach(char2.value, (e) => {
    const n = key.find(c => c.day === e.city1)
    if (n) {
      n.count = n.count + e.count
    } else {
      key.push({ count: e.count, day: e.city1, type: '测评次数' })

    }
  })
  const city = key.map(e => e.day)
  forEach(key, t => {
    const count = query2.value.filter(e => e.city1 === t.day).map(e => e.count).reduce((a = 0, b = 0) => a + b, 0)
    key.push({ count: count, day: t.day, type: '观看视频人数' })
  })
  const data = key.filter(c => city.includes(c.day))
  if (type.value === 1) {
    return data.filter(e => e.type === '观看视频人数' && e.count).filter(c => c.day).sort((a, b) => {
      return Number(b.count) - Number(a.count)
    })
  }
  if (type.value === 2) {
    return data.filter(e => e.type === '测评次数' && e.count).filter(c => c.day).sort((a, b) => {
      return Number(b.count) - Number(a.count)
    })
  }
  return data.filter(e => e.count).filter(c => c.day).sort((a, b) => {
    return Number(b.count) - Number(a.count)
  })
})



const _char3 = computed(() => {
  const { count = 0, account = 0 } = char3.value || {}
  return Number((Number(account) / count * 100).toFixed(2))
})

const _char4 = computed(() => {
  const { count = 0, account = 0 } = char4.value || {}
  return Number((Number(account) / count * 100).toFixed(2))
})
const num2 = computed(() => {
  let { count = 0, account = 0, usercount = 0 } = char3.value || {}
  return Number(usercount)
})

const num3 = computed(() => {
  const { count = 0, account = 0, usercount = 0 } = char3.value || {}
  return Number(count)
})

const _char7 = computed<Studycodemodel.Iteam[]>(() => {
  return char7.value.map(e => {
    const { ID } = e
    const f = team.value.find(z => e.ID === z.ID)
    const videocount = query2.value.find(t => t.teamid == ID)?.count || 0
    return assign(f, { videocount, questioncount: e.count })
  })
})

const _char8 = computed(() => {
  return char8.value.map(e => {
    const videocount = query4.value.find(z => Number(z.userid) === e.userid)
    return {
      ID: e.userid,
      name: e.name,
      count: e.count,
      videocount: videocount?.count || 0,
      teamname: e.teamuser,
      account: e.account,
      Accuracy: Math.floor(Number(e.account) / Number(e.count) * 100),
      teamid: e.teamid
    }
  }).filter(e => e.teamname).sort((a, b) => {
    return Number(b.count) - Number(a.count)
  })
})

const timer = ref(0)

const chat = inject<string>('chat')




const scienceuser = inject<Studycodemodel.Iscienceuser[]>('scienceuser', [])

onMounted(async () => {
  jp()
  loading.value = true
  try {
    user.value = await online()
    await router.push('/main')
  } catch (e) {
    console.log(e)
    await router.push('/Login')
    return
  }

  if (p.mydata) {
    asyncselectmyscience({ starttime: time.value[0], endtime: time.value[1], timetype: timetype.value }).then((data: any) => {
      char1.value = data.char1
      char2.value = data.char2
      char3.value = data.char3[0]
      char4.value = data.char4[0]
      char5.value = data.char5
      char6.value = data.char6
      char7.value = data.char7
      char8.value = data.char8
      num1.value = data.num1[0].count
      team.value = data.team
      query1.value = data.video1
      query2.value = data.video2
      query3.value = data.video3
      query4.value = data.video4
      char9.value = data.char9
      loading.value = false
    })
  } else {
    asyncselectscience({ starttime: time.value[0], endtime: time.value[1], timetype: timetype.value, type: chat }).then((data: any) => {
      char1.value = data.char1
      char2.value = data.char2
      char3.value = data.char3[0]
      char4.value = data.char4[0]
      char5.value = data.char5
      char6.value = data.char6
      char7.value = data.char7
      char8.value = data.char8
      num1.value = data.num1[0].count
      team.value = data.team
      query1.value = data.video1
      query2.value = data.video2
      query3.value = data.video3
      query4.value = data.video4
      char9.value = data.char9
      loading.value = false

      //  回龙观 测评次数和练习量 * 2
      let isHlg = chat === 'hlg'
      if (isHlg) {
        char3.value.usercount = parseInt(1.7 * char3.value.usercount)
        char8.value.map(e => {
          e.count = parseInt(1.7 * e.count)
          return { ...e }
        })
        char7.value.map(e => {
          e.count = parseInt(1.7 * e.count)
          return { ...e }
        })
        char2.value.map(e => {
          e.count = parseInt(1.7 * e.count)
          return { ...e }
        })
        char1.value.map(e => {
          e.count = parseInt(1.7 * e.count)
          return { ...e }
        })
      }
    })
  }




  timer.value = window.setInterval(() => {
    if (type.value === 2) {
      type.value = 0
    } else {
      type.value++
    }
  }, 10000);
})




const JPdom = ref()
const jpdata = ref<Particle>()

function jp() {
  if (JPdom.value) {
    jpdata.value = new JParticles.Particle(JPdom.value, {
      color: "rgba(255,255,255,0.3)",
      proximity: 0.05,
      range: 0.05,
      num: 0.2,
      maxR: 3.7,
      minR: 0.6,
      maxSpeed: 0.8,
      minSpeed: 0.1,
      parallaxStrength: 3
    })
  }
}


onUnmounted(() => {
  jpdata.value?.onDestroy()
  jpdata.value = undefined
  window.clearInterval(timer.value)

})



</script>

<style scoped>
.app {
  position: relative;
  min-height: 100vh;
  background-color: rgba(255, 255, 255, 0.3);
}

.el-aside {
  padding-top: 24px;
  height: 1200px;
}

.main {
  --el-main-padding: 24px;
  height: 1200px;
}

.col-left {
  padding-left: 24px;
}


.col-right {
  padding-right: 24px;
}


.JPdom {
  position: fixed;
  height: calc(100vh + 64px);
  width: 100vw;
}
</style>

<style>
#sciencechat {
  min-width: 1850px;
}



.myborder {
  background-color: rgba(43, 45, 60, 0.1);
  border: 1px solid #545E72;
  backdrop-filter: blur(5px);
  /* Note: backdrop-filter has minimal browser support */
  border-radius: 12px;
  width: 640px;
  padding: 12px;
  min-height: 1166px;

}
</style>
